<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0,minimum-scale=1.0, maximum-scale=1.0,user-scalable=no">
		<title>供应商系统</title>
        <link rel="stylesheet" type="text/css" href="/Public/css/bootstrap.css"/>
        <link rel="stylesheet" href="/Public/css/style.css" />
        <link rel="stylesheet" type="text/css" href="/Public/css/font-awesome.min.css"/>
        <link rel="stylesheet" type="text/css" href="/Public/css/order.css"/>
    </head>
	<body>
		<header class="header">
				<a href="/"  class="back"><i class="fa fa-angle-left"></i></a>
				<h1>新订单</h1>				
			</header>
		<div id="app">
			<nav class="nav">
				<ul class="nav-ul">
						<li v-for="list in lists"><a :href="list.href"><i class="fa" :class="list.icon"></i>{{list.name}}<span class="badge">{{list.num}}</span></a></li>
				</ul>
			</nav>
			<section>
				<h2 class="hidden">订单信息</h2>
				<div class="top">
					<div class="topleft" v-show="purchases.length<2?false:true">
						<label >全选<input type="checkbox" class="allcheck"  @change="allcheck"  /></label>
					</div>
					<div class="topright">
						共计{{allnumber()}}单
					</div>
				</div>
				<div class="content">
					<ul class="purchasebox" v-if="purchases[0].items.length">
						<li v-for="(purchase,index) in purchases">
							<div class="group">
								<div class="col-xs-4"><label>选择<input type="checkbox" class="check" @change="check"/></label></div>
								<div class="col-xs-8">采购批次ID：{{purchase.id}}</div>						
							</div>
							<div class="group">
								<div class="col-xs-6">采购人：{{purchase.purchaser}}</div>
								<div class="col-xs-6">供货商：{{purchase.supplier}}</div>
							</div>	
							<div class="group">
								<div class="col-xs-12">下单时间：{{purchase.time}}</div>
							</div>
							<table class="table table-bordered">
								<thead>
									<tr>
										<th class="text-center">序号</th>
										<th class="text-center">商品标题</th>
										<th class="text-center">条码</th>
										<th class="text-center">采购数量</th>
										<th class="text-center">采购单价</th>
										<th class="text-center">小计</th>
									</tr>
								</thead>
								<tbody>
									<tr class="text-center" v-for="(item,index) in purchase.items" v-if="index>=2?purchase.more:'ture'">
										<td>{{index+1}}</td>
										<td style="width: 120px;">{{item.name}}</td>
										<td style="width: 80px;word-wrap:break-word;word-break:break-all ">{{item.barcode}}</td>
										<td>{{item.category}}</td>
										<td>{{item.unitprice}}</td>
										<td>{{item.num*item.unitprice}}</td>										
									</tr>
									<tr class="text-center" @click="purchase.more='ture'" v-if="!purchase.more" v-if="purchase.items.length>2">
										<td colspan="6" class="more">展开全部<i class="fa fa-caret-down" style="margin-left: 5px;"></i></td>
									</tr>
									<tr class="text-center">
										<td colspan="6">共{{purchase.items.length}}条，合计：{{allmoney(index)}}元，结账方式：{{purchase.mode}}</td>
									</tr>
								    <tr>
								    	<td colspan="6">
								    		<p class="remarks"> 交货时间：收到订单之日起48小时内；</p>
								    		<p class="remarks">订单价格：以本订货单为准。送货到我司仓库及门店视为对本订货单内容的认可；</p>
								    		<p class="remarks">订货单经三方签字，作为与我司财务对账依据；</p>
								    		<p class="remarks">如遇列表中商品降价的情形，则需告知我司，该类商品价格按降价后的价格执行。</p>
								    	</td>
								    </tr>
								</tbody>




							</table>							
						</li>
					</ul>
					<ul class="refundbox" v-if="refunds[0].items.length">
						<li v-for="(refund,index) in refunds">
							<div class="group">
								<div class="col-xs-4"><label>选择<input type="checkbox" class="check" @change="check"/></label></div>
								<div class="col-xs-8">退货采购批次ID：{{refund.id}}</div>						
							</div>
							<div class="group">
								<div class="col-xs-6">采购人：{{refund.purchaser}}</div>
								<div class="col-xs-6">供货商：{{refund.supplier}}</div>
							</div>	
							<div class="group">
								<div class="col-xs-12">下单时间：{{refund.time}}</div>
							</div>
							<table class="table table-bordered">
								<thead>
									<tr>
										<th class="text-center">序号</th>
										<th class="text-center">商品标题</th>
										<th class="text-center">条码</th>
										<th class="text-center">退货数量</th>
										<th class="text-center">采购单价</th>
										<th class="text-center">小计</th>
										<th class="text-center">退货原因</th>
									</tr>
								</thead>
								<tbody>
									<tr class="text-center" v-for="(item,index) in refund.items" v-if="index>=2?refund.more:'ture'">
										<td>{{index+1}}</td>
										<td style="width: 120px;">{{item.name}}</td>
										<td style="width: 100px;word-break:break-all;">{{item.barcode}}</td>
										<td>{{item.num}}</td>
										<td>{{item.unitprice}}</td>
										<td>{{(item.num*item.unitprice).toFixed(1)}}</td>
										<td>{{item.reason}}</td>
									</tr>
									<tr class="text-center" @click="refund.more='ture'" v-if="!refund.more">
										<td colspan="7" class="more">展开全部<i class="fa fa-caret-down" style="margin-left: 5px;"></i></td>
									</tr>
									<tr class="text-center">
										<td colspan="7">共{{refund.items.length}}条，合计：{{allmoney(index)}}元，结算方式：{{refund.mode}}</td>
									</tr>
								</tbody>
							</table>
						</li>
					</ul>
				</div>
			</section>
			<footer class="footer">
				<div class="pull-left subtext"></div>
				<button class="btn btn-danger orders pull-right" @click="sub">接单</button>
			</footer>
		</div>
		<script src="/Public/js/jquery-2.1.0.js"></script>
		<script src="/Public/js/vue.js"></script>
		<script src="/Public/js/vue-resource.js"></script>
		<script>
			var vm = new Vue({
				el:"#app",
				data:{
                    lists:[{href:"/index/neworder",name:"新订单",num:"",icon:"fa-file-text-o"},{href:"/index/delivery",name:"待发货",num:"",icon:"fa-inbox"},{href:"/index/receipt",name:"待收货",num:"",icon:"fa-truck"},{href:"/index/arrived",name:"已完成",num:"",icon:"fa-check-square"},{href:"/index/cancel",name:"已取消",num:"",icon:"fa-frown-o"}],
					purchases:[{items:[]}],
					refunds:[{items:[]}]
				},
				methods:{
				    allnumber:function(){
				        var purchases = this.purchases.length;
				        var refunds = this.refunds.length;
				        if(!this.purchases[0].items.length){
                            purchases = 0;
                        }
                        if(!this.refunds[0].items.length){
                            refunds = 0;
                        }
				      return purchases+refunds;
                    },
					allmoney:function(n){
						var money = 0;
						for(var i in this.purchases[n].items){
							money += this.purchases[n].items[i].num*this.purchases[n].items[i].unitprice;
						}
						return money.toFixed(1);
					},
					sub:function(){
						var purchases = [];
						var refunds = [];
						if(this.purchases.length>1 && this.purchases.length != 0) {
                            $.each($('.purchasebox .check'), function (index) {
                                if ($(this).is(":checked")) {
                                    purchases.push({
                                        _id: vm.purchases[index]['_id'],
                                        id: vm.purchases[index]['id'],
                                    });
                                }
                            });
                        }else{
                            purchases.push({
                                _id: vm.purchases[0]['_id'],
                                id: vm.purchases[0]['id'],
                            });
                        };
						$.each($('.refundbox .check'), function(index) {
							if($(this).is(":checked")){
								refunds.push({
                                    _id:vm.refunds[index]['_id'],
                                    id:vm.refunds[index]['id'],
                                });
							}
						});
						if(purchases.length||refunds.length){
						    var data = {
                                purchases:purchases,
                                refunds:refunds
                            };
                            this.$http.post('/order/accept_order',data,{emulateJSON: true}).then(function(res){		//初始化赋值
                                   console.log(res.data.data);
                                    alert('成功');
                                   window.location.href="/index/delivery";
                            },function(){

                            });
						}else{
							alert("没有选择订单");
							return false;
						};
					},
					allcheck:function(){
						if($('.allcheck').is(":checked")){
							$('.check').prop('checked',true);
						}else{
							$('.check').prop('checked',false);
						};
						this.check();
					},
					check:function(){
						var purchasenum = 0;
						var refundnum = 0;
						$.each($('.purchasebox .check'), function(index) {
							if($(this).is(":checked")){
								purchasenum++;
							}
						});
						$.each($('.refundbox .check'), function(index) {
							if($(this).is(":checked")){
								refundnum++;
							}
						});
						$('.subtext').text('采购'+purchasenum+'单，退货'+refundnum+'单');
					}
				},
				created:function(){
						this.$http.get('/order/new_order_info',{emulateJSON: true}).then(function(res){		//初始化赋值
		 					console.log(res.data.data.length);
                                    if(res.data.data.length){
                                        this.purchases = res.data.data;
                                    }else {
                                        this.purchases = [{items: []}];
                                    }
                                    for(var i in res.data.date) {
                                        if (res.data.date[i] == 0) {
                                            this.lists[i].num = "";
                                        } else {
                                            this.lists[i].num = res.data.date[i];
                                        }
                                    }
                                    console.log(res.data.data);
						},function(){

						});
				}
			});
		</script>
	</body>
</html>
